<template>
  <div>
    <p>当前版本: {{ version }}</p>
    <p>当前版本号: {{ versionCode }}</p>
    <p>当前编译日期: {{ buildTime }}</p>

    <div id="lineChart" style="width: 900px;height:400px;"></div>
    <div>
      <button @click="sendMessage">模拟发送消息</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      maxDataPoints: 10, // 最大显示数据点数
      chartThemeColors: ['#5470C6', '#91CC75'], // 主题色（电流蓝，电压绿）
      chartData: {
        timestamps: [],
        current: [],
        voltage: []
      },
      chart: null,
    };
  },
  mounted() {
    console.log(process.env)
    this.initChart();
    this.setupWebSocketListener();
    this.webSocketOpenListener();
  },
  computed: {
    version() {
      return process.env.VUE_APP_CLIENT_VERSION || '未知版本';
    },
    versionCode() {
      return process.env.VUE_APP_CLIENT_VERSION_CODE || '未知版本号';
    },
    buildTime() {
      return process.env.VUE_APP_CLIENT_BUILD_TIME || '未知日期';
    }
  },
  methods: {
    // 初始化图表
    initChart() {
      this.chart = this.$echarts.init(document.getElementById('lineChart'));
      const baseOption = this.getBaseChartOption();
      this.chart.setOption(baseOption);
    },
    // 获取基础图表配置
    getBaseChartOption() {
      return {
        // 图表标题配置
        title: {
          // 标题文本内容
          text: '实时电流电压监控',
          // 标题文本样式，这里设置字体大小为 16px
          textStyle: {fontSize: 16}
        },
        // 提示框组件配置，当鼠标悬停在图表上时显示相关信息
        tooltip: {
          // 触发方式，'axis' 表示鼠标悬停在坐标轴上时触发提示框
          trigger: 'axis',
          // 坐标轴指示器类型，'cross' 表示显示十字准线
          axisPointer: {type: 'cross'}
        },
        // 图例组件配置，用于展示不同系列数据的标识
        legend: {
          // 图例的数据项，对应图表中不同系列的名称
          data: ['电流', '电压'],
          // right: 50
        },
        // 网格配置，用于控制图表内容在容器中的布局
        grid: {
          left: 50,
          right: 50,
          bottom: 20
        },
        // x 轴配置
        xAxis: {
          // type: 'category',
          // x 轴的类型，'time' 表示使用时间轴，适用于处理时间序列数据
          type: 'time',
          // 数据是否紧贴坐标轴边缘，设置为 false 表示数据紧贴边缘
          boundaryGap: false,
          // x 轴的数据，这里绑定到组件 data 中的 chartData.timestamps 数组
          data: this.chartData.timestamps,
          // 轴标签格式化函数，将时间戳格式化为 'hh:mm:ss' 的字符串
          axisLabel: {
            formatter: (value) => this.$echarts.format.formatTime('hh:mm:ss', value)
          },
          // x 轴分割线配置
          splitLine: {
            // 是否显示分割线，设置为 true 表示显示
            show: true,
            // 分割线的样式配置
            lineStyle: {
              // 分割线的类型为虚线
              type: 'dashed',
              // 分割线的颜色为 '#e6e6e6'
              color: '#e6e6e6'
            }
          }
        },
        // y 轴配置，使用数组表示可以有多个 y 轴
        yAxis: [
          {
            // y 轴的名称，用于标识该 y 轴代表的含义
            name: '电流 (A)',
            // y 轴的类型，'value' 表示数值轴，适用于连续的数值数据
            type: 'value',
            // y 轴的位置，'left' 表示位于图表左侧
            position: 'left',
            // y 轴轴线样式配置
            axisLine: {
              // 轴线的颜色，使用组件 data 中的 chartThemeColors 数组的第一个颜色
              lineStyle: {
                color: this.chartThemeColors[0],
              },
              // 轴线是否在 0 刻度处显示，设置为 false 表示不在 0 刻度处显示
              onZero: false,
            },
            // y 轴标签样式配置
            axisLabel: {
              // 标签字体大小为 12px
              fontSize: 12,
              // 标签颜色使用组件 data 中的 chartThemeColors 数组的第一个颜色
              color: this.chartThemeColors[0],
            },
            // y 轴分割线配置
            splitLine: {
              // 是否显示分割线，设置为 true 表示显示
              show: true,
              // 分割线的样式配置
              lineStyle: {
                // 分割线的类型为虚线
                type: 'dashed',
                // 分割线的颜色为 '#e6e6e6'
                color: '#e6e6e6'
              }
            },
            // Y轴不从 0 开始，根据数据自动调整范围
            // scale: true
          },
          {
            // y 轴的名称，用于标识该 y 轴代表的含义
            name: '电压 (V)',
            // y 轴的类型，'value' 表示数值轴，适用于连续的数值数据
            type: 'value',
            // y 轴的位置，'right' 表示位于图表右侧
            position: 'right',
            // 右侧 y 轴相对于默认位置的偏移量，这里设置为 0
            offset: 0,
            // y 轴轴线样式配置
            axisLine: {
              // 轴线的颜色，使用组件 data 中的 chartThemeColors 数组的第二个颜色
              lineStyle: {
                color: this.chartThemeColors[1],
              },
              // 轴线是否在 0 刻度处显示，设置为 false 表示不在 0 刻度处显示
              onZero: false,
            },
            // y 轴标签样式配置
            axisLabel: {
              // 标签字体大小为 12px
              fontSize: 12,
              // 标签颜色使用组件 data 中的 chartThemeColors 数组的第二个颜色
              color: this.chartThemeColors[1],
            },
            // y 轴分割线配置
            splitLine: {
              // 是否显示分割线，设置为 true 表示显示
              show: true,
              // 分割线的样式配置
              lineStyle: {
                // 分割线的类型为虚线
                type: 'dashed',
                // 分割线的颜色为 '#e6e6e6'
                color: '#e6e6e6'
              }
            },
            // Y轴不从 0 开始，根据数据自动调整范围
            // scale: true
          }
        ],
        // 系列列表，每个系列代表一组数据
        series: [
          {
            // 系列的名称，对应图例中的标识
            name: '电流',
            // 系列的类型，'line' 表示折线图
            type: 'line',
            // 是否显示数据点的符号，设置为 false 表示不显示
            showSymbol: false,
            // 是否平滑曲线，设置为 true 表示使用平滑曲线连接数据点
            smooth: true,
            // 指定该系列使用的 y 轴索引，这里使用第一个 y 轴
            yAxisIndex: 0,
            // 数据项的样式配置，这里设置线条颜色为组件 data 中的 chartThemeColors 数组的第一个颜色
            itemStyle: {color: this.chartThemeColors[0]},
            // 折线图下方区域将填充渐变颜色
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: this.chartThemeColors[0] + '80' },
            //     { offset: 1, color: this.chartThemeColors[0] + '10' }
            //   ])
            // },
            // 是否开启动画效果，设置为 false 表示关闭
            animation: false
          },
          {
            // 系列的名称，对应图例中的标识
            name: '电压',
            // 系列的类型，'line' 表示折线图
            type: 'line',
            // 是否显示数据点的符号，设置为 false 表示不显示
            showSymbol: false,
            // 是否平滑曲线，设置为 true 表示使用平滑曲线连接数据点
            smooth: true,
            // 指定该系列使用的 y 轴索引，这里使用第二个 y 轴
            yAxisIndex: 1,
            // 数据项的样式配置，这里设置线条颜色为组件 data 中的 chartThemeColors 数组的第二个颜色
            itemStyle: {color: this.chartThemeColors[1]},
            // 折线图下方区域将填充渐变颜色
            // areaStyle: {
            //   color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     { offset: 0, color: this.chartThemeColors[1] + '80' },
            //     { offset: 1, color: this.chartThemeColors[1] + '10' }
            //   ])
            // },
            // 是否开启动画效果，设置为 false 表示关闭
            animation: false
          }
        ]
      };
    },
    // 验证数据格式
    validateData(data) {
      return (
          data &&
          typeof data.timestamp !== 'undefined' &&
          typeof data.current !== 'undefined' &&
          typeof data.voltage !== 'undefined' &&
          !isNaN(parseFloat(data.current)) &&
          !isNaN(parseFloat(data.voltage))
      );
    },
    // 设置 WebSocket 监听器
    setupWebSocketListener() {
      this.$ws.url = 'ws://localhost:8080/ws';
      if (!this.$ws) {
        console.error('WebSocket 未定义，请检查配置');
        return;
      }
      this.$ws.onmessage = (event) => {
        try {
          const data = JSON.parse(event.data);
          this.handleReceivedMessage(data);
        } catch (error) {
          console.error('消息解析失败：', error);
        }
      };
    },
    // 处理接收到的消息
    handleReceivedMessage(data) {
      if (!this.validateData(data)) {
        console.warn('Invalid data format:', data);
        return;
      }
      this.addNewData(data);
      this.updateChart();
    },
    // 添加新数据
    addNewData(data) {
      this.chartData.timestamps.push(data.timestamp);
      this.chartData.current.push(parseFloat(data.current));
      this.chartData.voltage.push(parseFloat(data.voltage));
      if (this.chartData.timestamps.length > this.maxDataPoints) {
        this.chartData.timestamps.shift();
        this.chartData.current.shift();
        this.chartData.voltage.shift();
      }
      // console.log('this.chartData:', this.chartData, data.timestamp)
    },
    // 更新图表
    updateChart() {
      const seriesOption = {
        series: [
          {
            data: this.chartData.current.map((v, i) => [this.chartData.timestamps[i], v])
          },
          {
            data: this.chartData.voltage.map((v, i) => [this.chartData.timestamps[i], v])
          }
        ]
      };
      this.chart.setOption(seriesOption);
    },
    webSocketOpenListener() {
      if (!this.$ws) {
        console.error('WebSocket 未定义，请检查配置');
        return;
      }
      this.$ws.onopen = () => {
        console.log('WebSocket 已打开')
        this.resetChart()
      };
    },
    // 重置图表
    resetChart() {
      this.chartData = {
        timestamps: [],
        current: [],
        voltage: []
      };
      this.updateChart();
    },
    // 发送消息
    sendMessage() {
      const message = JSON.stringify({
        type: 'chat', // 消息类型（用于后端区分业务）
        content: "测试消息内容",
        timestamp: new Date().getTime()
      });
      if (this.$ws && this.$ws.readyState === WebSocket.OPEN) {
        this.$ws.send(message);
      } else {
        console.error('WebSocket 未连接，请稍后再试');
      }
    },
  },
  beforeDestroy() {
    // 销毁图表实例，释放资源
    if (this.chart) {
      this.chart.dispose();
    }
  },

};
</script>

<style scoped>

</style>
